<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片占位符说明</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            line-height: 1.6;
        }
        h1 {
            color: #333;
        }
        ul {
            margin-bottom: 20px;
        }
        li {
            margin-bottom: 10px;
        }
        .note {
            background-color: #f0f0f0;
            padding: 15px;
            border-radius: 5px;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <h1>个人作品集网站 - 图片占位符说明</h1>
    
    <p>由于系统限制，我们无法直接创建二进制图片文件。请按照以下步骤手动准备图片资源：</p>
    
    <ol>
        <li>在项目根目录下创建一个名为 <strong>images</strong> 的文件夹</li>
        <li>在该文件夹中添加以下图片文件（使用您自己的图片）：</li>
    </ol>
    
    <ul>
        <li><strong>profile.jpg</strong> - 个人照片</li>
        <li><strong>hero.jpg</strong> - 英雄区域背景图片</li>
        <li><strong>project1.jpg</strong> - 第一个项目的图片</li>
        <li><strong>project2.jpg</strong> - 第二个项目的图片</li>
        <li><strong>project3.jpg</strong> - 第三个项目的图片</li>
    </ul>
    
    <div class="note">
        <p><strong>提示：</strong>您可以使用任何图片编辑工具来准备这些图片，确保它们的尺寸和质量适合网站展示。</p>
    </div>
</body>
</html>